<template>
  <el-table stripe
            height="100%"
            border
            size="mini"
            :data="tableData"
            style="width: 100%">
    <el-table-column
      v-for="(item,index) in headers"
      :width="item.width"
      :prop="item.value"
      :label="item.label"
      :key="`${item.value}_${index}`">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" :content="scope.row[item.value]" placement="top-start">
          <div class="s-t-item">{{ scope.row[item.value] }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'

  export default {
    name: 'statisticsTable',
    props: {
      //  表格数据
      tableData: {
        type: Array,
        default: () => null
      },
      //  表头数据
      headers: {
        type: Array,
        default: () => null
      }
    },
    components: {},
    setup(props, content) {

      let {} = props

      const data = reactive({})

      return { ...toRefs(data) }
    }
  }
</script>

<style lang="scss">
  $full: 100%;
  .el-table {
    .el-table__body-wrapper {
      .el-table__body {
        .el-table__row {
          .cell {
            .s-t-item {
              width: 100%;
              height: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
</style>
